<template>
  <div class="propConfig">
    <DividerTile title="样式配置" :isShow.sync="isShow"></DividerTile>
    <el-form size="small" label-width="90px" v-show="isShow">
      <el-form-item label="字体颜色">
        <el-color-picker v-model="activeFormData.style.color" @change="valueChange($event, 'style.color')"></el-color-picker>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="activeFormData.style.background" @change="valueChange($event, 'style.background')"></el-color-picker>
      </el-form-item>
      <el-form-item label="是否加粗">
        <el-switch v-model="fontWeight" @change="valueChange($event, 'style.fontWeight')">
        </el-switch>
      </el-form-item>
      <el-form-item label="字体大小">
        <el-input-number v-model="fontSize" :min="12" :max="30" @change="valueChange($event, 'style.fontSize')"></el-input-number>
      </el-form-item>
      <el-form-item label="左边距">
        <el-input-number v-model="paddingLeft" @change="valueChange($event, 'style.paddingLeft')" :min="0" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="右边距">
        <el-input-number v-model="paddingRight" @change="valueChange($event, 'style.paddingRight')" :min="0" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="上边距">
        <el-input-number v-model="paddingTop" @change="valueChange($event, 'style.paddingTop')" :min="0" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="下边距">
        <el-input-number v-model="paddingBottom" @change="valueChange($event, 'style.paddingBottom')" :min="0" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="显示操作">
        <el-switch v-model="activeFormData.operatShow" @change="valueChange($event, 'btnShow')">
        </el-switch>
      </el-form-item>
      <div v-show="activeFormData.operatShow">
        <el-form-item label="显示图标">
          <el-switch v-model="activeFormData.iconShow" @change="valueChange($event, 'iconShow')">
          </el-switch>
        </el-form-item>
        <el-form-item label="显示文字">
          <el-switch v-model="activeFormData.textShow" @change="valueChange($event, 'textShow')">
          </el-switch>
        </el-form-item>
        <el-form-item label="文字">
          <el-input v-model="activeFormData.textName" @change="valueChange($event, 'textName')"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <PopoverIcon v-model="activeFormData.iconName" @change="valueChange($event, 'iconName')"></PopoverIcon>
        </el-form-item>
        <el-form-item label="文字大小">
          <el-input-number v-model="textFontSize" :min="12" :max="30" @change="valueChange($event, 'operatStyle.textFontSize')"></el-input-number>
        </el-form-item>
        <el-form-item label="图标大小">
          <el-input-number v-model="iconFontSize" :min="12" :max="30" @change="valueChange($event, 'operatStyle.iconFontSize')"></el-input-number>
        </el-form-item>
        <el-form-item label="操作右边距">
          <el-input-number v-model="operatPaddingRight" :min="0" :max="30" @change="valueChange($event, 'operatStyle.operatPaddingRight')"></el-input-number>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import DividerTile from '../../../dividerTile'
// import iconfont '@/assets/iconfont/iconfont.json'
const iconfont = require('@/assets/iconfont/iconfont.json')
import PopoverIcon  from '@/components/PopoverIcon'
export default {
  name: 'datetimeProp',
  components: {
    DividerTile,
    PopoverIcon
  },
  data() {
    return {
      iconfont,
      isShow: true,
      paddingLeft: '',
      paddingRight: '',
      paddingTop: '',
      paddingBottom: '',
      fontSize: '',
      fontWeight: 'bold',

      textFontSize: '',
      iconFontSize: '',
      operatPaddingRight: ''
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData'])
  },
  watch: {
    activeFormData: {
      handler(val) {
        const { paddingLeft, paddingRight, paddingTop, paddingBottom, fontSize, fontWeight } = val.style
        const { textFontSize, iconFontSize, operatPaddingRight } = val.operatStyle
        this.paddingLeft = paddingLeft
        this.paddingRight = paddingRight
        this.paddingTop = paddingTop
        this.paddingBottom = paddingBottom
        this.fontSize = fontSize
        this.fontWeight = fontWeight === 'bold'

        this.textFontSize = textFontSize
        this.iconFontSize = iconFontSize
        this.operatPaddingRight = operatPaddingRight
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    ...mapMutations('pageData', ['SETPROP']),
    valueChange(value, key) {
      // 是否加粗需要转为字符串
      if (key === 'style.fontWeight') {
        const curValue = value ? 'bold' : 'normal'
        this.SETPROP({
          value: curValue,
          key
        })
      } else {
        this.SETPROP({
          value,
          key
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.propConfig {
  padding-right: 10px;
}
</style>